<template>
  <view class="main" :style="{ paddingTop: totalHeight + 'px' }">
    <!-- http://content.daylucky.cn/admin/image/1okqp9bt1xx5h4r5g3qz70j1.png -->
    
    <view v-if="step === 2" class="pl-64 pr-64">
      <div class="title">TA的性别</div>
      <div class="txt">如果用一种动物描述对方<br>你会认为ta是地球上的什么动物</div>
      <div class="mt-64 flex_center flex_wrap pb-50">
        <view class="animal_list flex_center flex-c" v-for="(item, index) in animalList" :key="index">
          <image :src="item.url" class="animal_img"></image>
          <view>{{ item.title }}</view>
        </view>
      </div>
      <view class="btn">询问我和TA</view>
    </view>
    <view v-if="step === 3" class="a">
      <view class="three_txt">
        画一个你想表达的文字<br>
        或者是一个数字 如果都无法描述 <br>
        可以任意勾勒
      </view>
      <view class="three_tip">*连接次数：2次</view>
      <view class="mt-60 flex_center">
        <canvas />
      </view>
      <!-- http://content.daylucky.cn/admin/image/m64ff4by7wjss1xb37g6pt5t.png -->
    </view>
    <van-popup :show="isShow" @close="() => isShow = false" round custom-style="background: #fff" position="bottom">
      <!--  -->
      <div class="pt-86 flex_center flex-c">
        <div class="pop_list">另一个世界你俩在做什么</div>
        <div class="pop_list">从对方身上你能获得什么</div>
        <div class="pop_list">对方心里如何想你</div>
        <div class="pop_list">对方内心最真实的一面</div>
        <div class="pop_list">对方内心世界的场景</div>
        <div class="pop_list">ta与你的未来发展走向</div>
      </div>
    </van-popup>
  </view>
</template>
<script>
import canvas from '@/components/canvas/canvas'
export default {
  components: { canvas },
  data() {
    return {
      isShow: false,
      step: 2,
      totalHeight: this.totalHeight,
      animalList: [
        {
          normal: 'http://content.daylucky.cn/admin/image/z2sp3r1gowq8ir71nl31g9hm.png',
          url: 'http://content.daylucky.cn/admin/image/4vr5dl3dqbfhbvrpkbl9jic6.png',
          title: '熊猫'
        },
        {
          normal: 'http://content.daylucky.cn/admin/image/6ytn2d6zaf94mmf9j5cj6bvf.png',
          url: 'http://content.daylucky.cn/admin/image/iubye8lqvb0ej7dbwuuhz1uy.png',
          title: '狗'
        },
        {
          normal: 'http://content.daylucky.cn/admin/image/mz7xdg8x4iloj0322h4t55d0.png',
          url: 'http://content.daylucky.cn/admin/image/9uln1e5dm8mgtubl0x05w009.png',
          title: '狐狸'
        },
        {
          normal: 'http://content.daylucky.cn/admin/image/x2t0fnuduyc99ao8posgra5y.png',
          url: 'http://content.daylucky.cn/admin/image/wv4txm18vtd0neptia0xzi1t.png',
          title: '猫'
        },
        {
          normal: 'http://content.daylucky.cn/admin/image/w4r7xnqgkqo3kffu05zawkpa.png',
          url: 'http://content.daylucky.cn/admin/image/vmlzlynwydwgqkynm5rz4ogo.png',
          title: '蛇'
        },
        {
          normal: 'http://content.daylucky.cn/admin/image/gr8pvv4gmpvhyoh7a6hkw7ay.png',
          url:  'http://content.daylucky.cn/admin/image/y4lwhxrazy1htbrflx45923d.png',
          title: '牛'
        },
        {
          normal: 'http://content.daylucky.cn/admin/image/1u40d7kk74ozpx3qt2kvz72k.png',
          url: 'http://content.daylucky.cn/admin/image/34j145gqoy7ehtlivfrpwbdb.png',
          title: '鹿'
        },
        {
          normal: 'http://content.daylucky.cn/admin/image/8fmgwztzdkd064xncj53qyn3.png',
          url: 'http://content.daylucky.cn/admin/image/76c42b3opisyg2syz8p7qz5c.png',
          title: '虎'
        },
        {
          normal: 'http://content.daylucky.cn/admin/image/o4d7t7rkrxw0rmyuup3i17wi.png',
          url:'http://content.daylucky.cn/admin/image/78cur48tlunauchd77nrr86i.png',
          title: '猪'
        },
      ]
    }
  },

}
</script>
<style lang="scss">
.main {
 	font-family: pf_bold;
}

.btn {
  width: 620rpx;
  height: 96rpx;
  border-radius: 86rpx 86rpx 86rpx 86rpx;
  text-align: center;
  margin: 0 auto;
  background: #000000;
  font-size: 32rpx;
  color: #FFFFFF;
  line-height: 96rpx;
  font-style: normal;
}
.user_input {
 
}
.title {
  font-weight: 600;
  font-size: 40rpx;
  color: #000000;
  line-height: 47rpx;
}
.txt {
  font-weight: normal;
  font-size: 32rpx;
  color: #000000;
  text-align: center;
  font-style: normal;
 	font-family: pf_bold;
  margin-top: 84rpx;
  line-height: 58rpx;

}
.animal_list {
  width: 208rpx;
  font-weight: 400;
  font-size: 28rpx;
  color: #000000;
  line-height: 40rpx;
  margin-bottom: 26rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
  .animal_img {
    width: 124rpx;
    height: 124rpx;
    display: block;
    margin-bottom: 30rpx;
  }
}
.pop_list {
  width: 574rpx;
  height: 98rpx;
  background: url(http://content.daylucky.cn/admin/image/5p130d6jh7eeo7um2e0d6mj6.png) no-repeat left top/ 574rpx 98rpx;
  margin-bottom: 2rpx;
  text-align: center;
  line-height: 98rpx;
}
.plcaeholderClass {
  font-size: 28rpx;
  color: #999999;
}
.three_txt {
  font-weight: normal;
  font-size: 32rpx;
  color: #000000;
  line-height: 56rpx;
  text-align: center;
}
.three_tip {
  height: 56rpx;
  font-weight: normal;
  font-size: 24rpx;
  color: #949494;
  line-height: 56rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
  margin-top: 20rpx;
}

</style>